<template>
	<view>
		<u-navbar :title="title" :border-bottom='false'>
			<view slot='right' style="padding-right: 28rpx;">
				<view class="save">
					保存
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="tools">
				<image src="../../../static/imgs/zxjsb.png" mode=""></image>
				<text>识别证件添加信息</text>
			</view>
			<view class="addInfo">
				<view class="label">
					姓名
				</view>
				<view class="info-ul">
					<view class="info-li">
						<view class="type">
							中文姓名
						</view>
						<input type="text" placeholder="与证件姓名一致" />
						<view class="change" @click="pYchange">
							转拼音
						</view>
					</view>
					<view class="info-li">
						<view class="type">
							<view>英文姓</view>
							<view>(Surname)</view>
						</view>
						<input type="text" placeholder="如张三填写为“ZHANG" />
					</view>
					<view class="info-li">
						<view class="type">
							<view>英文名</view>
							<view>(Given names）</view>
						</view>
						<input type="text" placeholder="如张三填写为“SAN" />
					</view>
				</view>
				<view class="tip">
					请确保姓名与证件一致
				</view>
			</view>

			<view class="addInfo">
				<view class="label">
					证件
				</view>
				<view class="info-box">
					<view class="info-ul">
						<view class="info-li">
							<view class="certType">
								身份证
							</view>
							<view class="del">
								<u-icon name="trash-fill" color="#3587F7" size="32"></u-icon>
							</view>
						</view>
						<view class="info-li">
							<view class="type">
								证件号码
							</view>
							<input type="text" placeholder="请保持与证件一致" />
						</view>
						<view class="info-li" @click="showDate =true">
							<view class="type">
								有效期至
							</view>
							<input type="text" placeholder="请选择" />
							<view class="arrow">
								<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
							</view>
						</view>
					</view>
					<view class="info-ul" v-if="showHz">
						<view class="info-li">
							<view class="certType">
								护照
							</view>
							<view class="del" @click='showHz =false'>
								<u-icon name="trash-fill" color="#3587F7" size="32"></u-icon>
							</view>
						</view>
						<view class="info-li">
							<view class="type">
								证件号码
							</view>
							<input type="text" placeholder="请保持与证件一致" />
						</view>
						<view class="info-li" @click="showDate =true">
							<view class="type">
								有效期至
							</view>
							<input type="text" placeholder="请选择" />
							<view class="arrow">
								<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
							</view>
						</view>
					</view>
					<view class="info-ul" v-if="showTbz">
						<view class="info-li">
							<view class="certType">
								台胞证
							</view>
							<view class="del" @click="showTbz =false">
								<u-icon name="trash-fill" color="#3587F7" size="32"></u-icon>
							</view>
						</view>
						<view class="info-li">
							<view class="type">
								证件号码
							</view>
							<input type="text" placeholder="请保持与证件一致" />
						</view>
					</view>
					<view class="info-ul" v-if="showLs">
						<view class="info-li">
							<view class="certType">
								临时身份证
							</view>
							<view class="del" @click="showLs =false">
								<u-icon name="trash-fill" color="#3587F7" size="32"></u-icon>
							</view>
						</view>
						<view class="info-li">
							<view class="type">
								证件号码
							</view>
							<input type="text" placeholder="请保持与证件一致" />
						</view>
					</view>
					<view class="info-ul" v-if="showGa">
						<view class="info-li">
							<view class="certType">
								港澳通行证
							</view>
							<view class="del" @click="showGa =false">
								<u-icon name="trash-fill" color="#3587F7" size="32"></u-icon>
							</view>
						</view>
						<view class="info-li">
							<view class="type">
								证件号码
							</view>
							<input type="text" placeholder="请保持与证件一致" />
						</view>
						<view class="info-li" @click="showDate =true">
							<view class="type">
								有效期至
							</view>
							<input type="text" placeholder="请选择" />
							<view class="arrow">
								<u-icon name="arrow-right" color="#999999" size="32"></u-icon>
							</view>
						</view>
					</view>
					<view class="info-ul" v-if="showWg">
						<view class="info-li">
							<view class="certType">
								外国人永久居留身份证
							</view>
							<view class="del" @click="showWg =false">
								<u-icon name="trash-fill" color="#3587F7" size="32"></u-icon>
							</view>
						</view>
						<view class="info-li">
							<view class="type">
								证件号码
							</view>
							<input type="text" placeholder="请保持与证件一致" />
						</view>
					</view>
					<view class="add" @click="showPop=true">
						<u-icon name="plus-circle" color="#3587F7" size="32"></u-icon><text
							style="margin-left: 10rpx;">添加证件</text>
					</view>
				</view>
			</view>

			<view class="addInfo">
				<view class="label">
					其它信息
				</view>
				<view class="info-ul">
					<view class="info-li">
						<view class="type">
							生日
						</view>
						<input type="text" placeholder="请选择" />
						<view class="arrow">
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
					<view class="info-li">
						<view class="type">
							性别
						</view>
						<view class="sex">
							<view class="man" :class="{act:sexindex == 0}" @click="sexFn(0)">
								<image v-if="sexindex == 0" src="../../../static/imgs/man.png" mode=""></image>
								<image v-else src="../../../static/imgs/manh.png" mode=""></image>
								<text>男</text>
							</view>
							<view class="women" :class="{act:sexindex == 1}" @click="sexFn(1)">
								<image v-if="sexindex == 1" src="../../../static/imgs/women.png" mode=""></image>
								<image v-else src="../../../static/imgs/womenh.png" mode=""></image>
								<text>女</text>
							</view>
						</view>
					</view>
					<view class="info-li">
						<view class="type">
							<view>国籍</view>
							<view style="font-size: 20rpx;">(国家/地区)</view>
						</view>
						<input type="text" placeholder="请选择" />
						<view class="arrow">
							<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
						</view>
					</view>
					<view class="info-li">
						<view class="type">
							手机号
						</view>
						<view style="color: color: #333333;">
							+86
						</view>
						<input style="text-indent: 10rpx;" type="text" placeholder="常用手机号" />
						<view class="icon" style="margin-left: auto;">
							<image style="width: 32rpx;height: 32rpx;" src="../../../static/imgs/txl.png" mode="">
							</image>
						</view>
					</view>
				</view>
			</view>

			<view class="mySelf">
				<view class="self">
					设置为本人
				</view>
				<view class="check">
					<u-switch v-model="checked" size='32'></u-switch>
				</view>
			</view>
			
			<view class="delect" @click="delModel =true">
				<image src="../../../static/imgs/del.png" mode=""></image>
				<text>删除</text>
			</view>
			
		</view>
		
		<u-modal v-model="delModel" :content="content" show-cancel-button :show-title='false'></u-modal>
		<u-picker v-model="showDate" mode="time"></u-picker>
		<u-popup v-model="showPop" mode="bottom" closeable border-radius="16">
			<view class="certBox">
				<view class="title">
					选择证件类型
				</view>
				<view class="type-ul">
					<view class="type-li" @click="certType(1)">
						护照
					</view>
					<view class="type-li" @click="certType(2)">
						台胞证
					</view>
					<view class="type-li" @click="certType(3)">
						港澳通行证
					</view>
					<view class="type-li" @click="certType(4)">
						外国人永久居留身份证
					</view>
					<view class="type-li" @click="certType(5)">
						临时身份证
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		pinyin
	} from '@/common/pinyin.js'
	export default {
		data() {
			return {
				content:'删除出行人',
				delModel:false,
				checked: false,
				title: '编辑个人信息',
				showDate: false,
				showPop: false,
				showHz: false, // 护照
				showTbz: false, // 台胞证
				showGa: false, // 港澳通行证
				showWg: false,
				showLs: false, // 临时身份证
				sexindex:0,
			}
		},
		methods: {
			// 性别选择
			sexFn(val){
				this.sexindex = val
			},
			
			// 选择证件类型
			certType(num) {
				switch (num) {
					case 1:
						this.showHz = true
						break;
					case 2:
						this.showTbz = true
						break;
					case 3:
						this.showGa = true
						break;
					case 4:
						this.showWg = true
						break;
					case 5:
						this.showLs = true
						break;
					default:
						break;
				}
				this.showPop = false
			},

			// 拼音转换
			pYchange() {
				console.log(this.chineseToPinYin('你好'))
			},

			// 转拼音
			chineseToPinYin(l1) {
				var l2 = l1.length;
				var I1 = '';
				var reg = new RegExp('[a-zA-Z0-9]');
				for (var i = 0; i < l2; i++) {
					var val = l1.substr(i, 1);
					var name = this.arraySearch(val, pinyin);
					if (reg.test(val)) {
						I1 += val;
					} else if (name !== false) {
						I1 += name;
					}
				}
				I1 = I1.replace(/ /g, '-');
				while (I1.indexOf('--') > 0) {
					I1 = I1.replace('--', '-');
				}
				return I1;
			},
			arraySearch(l1, l2) {
				for (var name in pinyin) {
					if (pinyin[name].indexOf(l1) !== -1) {
						return this.ucfirst(name);
					}
				}
				return false;
			},
			ucfirst(l1) {
				if (l1.length > 0) {
					var first = l1.substr(0, 1).toUpperCase();
					var spare = l1.substr(1, l1.length);
					return first + spare;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.save {
		width: 88rpx;
		height: 48rpx;
		background: #3587F7;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		text-align: center;
		line-height: 48rpx;
		color: #FFFFFF;
	}

	.content {
		
		.delect {
			padding: 30rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			image {
				width: 40rpx;
				height: 40rpx;
			}
			text {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}
		
		.mySelf {
			margin-top: 32rpx;
			width: 100%;
			height: 88rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28rpx;
		}

		.tools {
			margin: 34rpx auto;
			width: 694rpx;
			height: 100rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			text {
				margin-left: 10rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}

		.addInfo {
			margin-top: 32rpx;

			.label,
			.tip {
				font-size: 28rpx;
				font-family: Segoe UI;
				font-weight: 400;
				color: #666666;
				padding-left: 28rpx;
			}

			.label {
				margin-bottom: 10rpx;
			}

			.tip {
				padding: 6rpx 0 6rpx 28rpx;
			}

			.info-ul {
				width: 100%;
				height: auto;
				background-color: #FFFFFF;
				padding: 0 28rpx;

				.info-li {
					width: 100%;
					height: 88rpx;
					border-bottom: 2rpx solid #F2F2F2;
					display: flex;
					align-items: center;
					
					.sex {
						display: flex;
						align-items: center;
						color: #999999;
						& .act {
							color: #333333;
						}
						.man,
						.women {
							display: flex;
							align-items: center;
							image {
								width: 32rpx;
								height: 32rpx;
							}
							text {
								margin-left: 6rpx;
								font-size: 28rpx;
								font-family: Segoe UI;
								font-weight: 400;
							}
						}
						
						.women {
							margin-left: 100rpx;
						}
					}
					
					.del {
						margin-left: auto;
					}

					.arrow {
						margin-left: auto;
					}

					.type {
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #666666;
						width: 200rpx;
					}

					.change {
						width: 116rpx;
						height: 48rpx;
						background: #FFFFFF;
						border: 2rpx solid rgba(153, 153, 153, 0.5019607843137255);
						border-radius: 4rpx;
						font-size: 24rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333333;
						text-align: center;
						line-height: 48rpx;
						margin-left: auto;
					}

					input {
						height: 100%;
						font-size: 28rpx;
						font-family: Segoe UI;
						font-weight: 400;
						color: #333333;
					}
				}
			}

			.add {
				width: 100%;
				height: 88rpx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #3587F7;
			}
		}
	}

	.certBox {
		padding-top: 10rpx;

		.title {
			width: 100%;
			height: 88rpx;
			text-align: center;
			line-height: 88rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			border-bottom: 2rpx solid #F2F2F2;
		}

		.type-ul {
			padding: 0 28rpx;

			.type-li {
				width: 100%;
				height: 88rpx;
				border-bottom: 2rpx solid #F2F2F2;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}
</style>
